<template>
  <div>
    <div>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>个人信息</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="isUpdatePass = true">修改密码</el-button>
        </div>
        <img :src="user.headUrl"/>
        <div class="item">账号：{{user.username}}</div>
        <div class="item">邮箱：{{user.email}}</div>
        <div class="item">电话：{{user.phone}}</div>
      </el-card>

      <el-dialog
          title="修改密码"
          :visible.sync="isUpdatePass"
          width="30%">
        <el-form>
          <el-form-item label="旧密码">
            <el-input v-model="passForm.oldPass" type="password"/>
          </el-form-item>
          <el-form-item label="新密码">
            <el-input v-model="passForm.newPass" type="password"/>
          </el-form-item>
          <el-form-item label="确认密码">
            <el-input v-model="passForm.checkPass" type="password"/>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="isUpdatePass = false">取 消</el-button>
    <el-button type="primary" @click="updatePass">确 定</el-button>
  </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "User",
  data(){
    return{
      user: {},
      roles:[],
      isUpdatePass: false,
      passForm:{
        oldPass: '',
        newPass: '',
        checkPass: ''
      }
    }
  },
  methods: {
    updatePass(){
      if (this.passForm.newPass.length < 6 || this.passForm.oldPass.length<6 || this.passForm.checkPass.length<6){
        this.$message.error("密码长度最短为6")
        return;
      }

      if (!(this.passForm.checkPass === this.passForm.newPass)) {
        this.$message.error("两次密码不一样")
        return;
      }

      let param={
        userId: this.user.id,
        oldPass: this.passForm.oldPass,
        newPass: this.passForm.newPass
      }
      this.postRequest('/user/updatePass',param).then(resp=>{
        if (resp.status == 200) {
          this.isUpdatePass = false
        }
      })

      this.passForm.checkPass = '';
      this.passForm.oldPass = '';
      this.passForm.newPass = '';

    }
  },
  created() {

    if (!sessionStorage.getItem("user")){
      this.$message.error("请先登录")
      this.$router.push('/')
    }

    this.user = JSON.parse(sessionStorage.getItem("user"))


  }
}
</script>

<style scoped>
.box-card{
  width: 40%;
}
.item{
  margin-top: 20px;
}
.box-card img{
  width: 50px;
  height: 50px;
  float: right;
}
</style>